<template>
  <div class="event">
    <el-table :data="items">
      <!-- <el-table-column prop="date" label="日期" width="140">
      </el-table-column>-->
      <el-table-column prop="title" label="活动标题"></el-table-column>
      <el-table-column prop="type" label="类别"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <!-- <el-button
            type="text"
            size="small"
            @click="$router.push(`/events/edit/${scope.row.eventId}`)"
          >编辑</el-button>
          <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>-->
          <el-button type="text" size="small" @click="eventList_detail(scope.row)">报名</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      :title="title"
      v-if="drawer"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <div
        v-html="body"
        style="height:500px;width:100%;overflow:auto;padding:20px 150px;margin-bottom:50px;"
      ></div>
      <div
        style="overflow-y:auto;height:400px;padding-bottom:30px;"
      >
        <el-form
          :model="dynamicValidateForm"
          ref="dynamicValidateForm"
          label-width="100px"
          class="demo-dynamic"
        >
          <el-form-item
            v-for="(domain, index) in dynamicValidateForm.teams"
            :label="'队员' + index"
            :key="domain.key"
            :prop="'teams.' + index + '.userId'"
          >
            <el-input v-model="domain.userId" placeholder="学号"></el-input>
            <el-input v-model="domain.memberName" placeholder="姓名"></el-input>
            <el-input v-model="domain.teamName" placeholder="队伍名称"></el-input>
            <el-select v-model="domain.isLeader" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-button @click.prevent="removeDomain(domain)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(dynamicValidateForm)">提交</el-button>
            <el-button @click="addDomain">新增队员</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

     <el-drawer
      :title="title2"
      v-if="drawer2"
      :visible.sync="drawer2"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <div
        v-html="body2"
        style="height:500px;width:100%;overflow:auto;padding:20px 150px;margin-bottom:50px;"
      ></div>
      <div>
        <el-form
          :model="dynamicValidateForm2"
          ref="dynamicValidateForm2"
          label-width="100px"
          class="demo-dynamic2"
        >
          <el-form-item>
            <el-input v-model="dynamicValidateForm2.registerNumber" placeholder="学号"></el-input>
            <el-input v-model="dynamicValidateForm2.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm2(dynamicValidateForm2)">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [],
      drawer: false,
      drawer2: false,
      direction: "rtl",

      dynamicValidateForm: {
        registration:{
          eventId:"",
        },
        teams: [
          {
            userId: "",
            teamName: "",
            memberName: "",
            isLeader: ""
          }
        ]
      },

       dynamicValidateForm2: {
          registerNumber: "",
          name:"",
          eventId:"",
      },

      options: [{
          value: 1,
          label: '队长'
        }, {
          value: 0,
          label: '队员'
        }],
        value: ''
    };
  },
  methods: {
    async fetch() {
      const res = await this.$http.get("/events");
      this.items = res.data.infos.list;
      this.items.forEach(item => {
        if (item.type === 0) {
          item.type = "比赛";
        } else {
          item.type = "活动";
        }
      });
    },
    eventList_detail(item) {
      if(item.type === "比赛"){
        this.drawer = true;
        this.dynamicValidateForm.registration.eventId = item.eventId
        this.title = item.title;
        this.body = item.content;
      }else if(item.type === "活动"){
        this.drawer2 = true;
        this.dynamicValidateForm2.eventId = item.eventId
        this.title2 = item.title;
        this.body2 = item.content;
      }
    },
    handleClose(done) {
      done();
    },

    async submitForm(formName) {
      console.log(formName)
      const res = await this.$http.post("/takePart",formName);
      if(res.data.code === 1000){
        this.$message({
            type: 'error',
            message: '请先登录!'
      });
      return
      }
      if(res.data.code === 8001){
        this.$message({
            type: 'error',
            message: '报名比赛失败'
      });
      return
      }
      if(res.data.code === 8002){
        this.$message({
            type: 'error',
            message: '已经报名了该项比赛'
      });
      return
      }
      this.$message({
            type: 'success',
            message: '报名比赛成功!'
      });
      this.drawer=false;
    },
    async submitForm2(formName2){
      console.log(formName2)
      const res = await this.$http.post("/join",formName2);
      if(res.data.code === 1000){
        this.$message({
            type: 'error',
            message: '请先登录!'
      });
      return
      }
      if(res.data.code === 7001){
        this.$message({
            type: 'error',
            message: '报名活动失败'
      });
      return
      }
      if(res.data.code === 7002){
        this.$message({
            type: 'error',
            message: '已经报名该项活动'
      });
      return
      }
      this.$message({
            type: 'success',
            message: '报名活动成功!'
      });
      this.drawer2=false;
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.teams.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.teams.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.teams.push({
      });
    }
  },
  created() {
    this.fetch();
  }
};
</script>
<style lang="scss">
.event {
  min-height: 84vh;
  padding: 0px 200px;
}
.el-input__inner{
  margin: 10px 0;
}

.demo-dynamic2{
  margin-right: 50px;
  padding-right: 30px;
}
.demo-dynamic{
  margin-right: 50px;
  padding-right: 30px;
}
</style>
